<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li, input{
            width: 600px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #999;
            line-height: 10px;
        }
        #x1{
            width: 600px;
            margin: 10px 0px;
            padding: 10px;
            border: 1px solid #999;
            line-height: 10px;
        }

    </style>

    <script src="./jquery-3.3.1.min.js"></script>
    <script>
        $(function(){
        // $('.moba li').eq(3).css('border', '5px solid #f00'); // 过滤出某个元素
        // $('.moba li').first().css('border', '5px solid #f00'); // 过滤出第一个元素
        // $('.moba li').last().css('border', '5px solid #f00'); // 最后一个元素
        // $('.moba li').css('border', '5px solid #f00').filter('.moba').css('border', '5px solid #f00'); // 过滤出满足条件那个
        // $('.moba li').css('border', '5px solid #f00').not('.moba').css('border', '5px solid #f00'); // 过滤出不满足条件那个
        // 
        
         // console.log($('#list li').hasClass('moba')); // 判断集合中是否包含某个类
         // console.log($('#list li').is('moba')); // 判断前面的集合中 是否有元素 符合指定的条件

         // console.log($('#list li').map(function(){
         //        alert('OK');
         //        console.log(this);
         //        return $(this).text();
                // 相对jqdoom进行遍历 并取出一部分值
        })
        
        // $('.moba').childern().css('border', '5px solid #f00'); // 找到moba的子元素
        // $('.moba').find().css('border', '5px solid #f00'); // 找后代元素
        // $('.moba').parent().css('border', '5px solid #f00'); // 找到父级
        // $('.moba').parents().css('border', '5px solid #f00'); // 找到所有父级
        // $('li.dota').parentUntil('mmorpg').css('border', '5px solid #f00'); // 找到父级们到mmorpg为止
        // $('li.dota').offsetParent().css('border', '5px solid #f00'); // 获取已定位的父级
        // $('li.dota').closest().css('border', '5px solid #f00'); // 向上查找父级 并返回
         // $('#ul.moba').next().css('border', '5px solid #f00'); // 后面一个同辈元素
         // $('#ul.moba').nextAll().css('border', '5px solid #f00'); // 后面所有的同辈元素
         // $('#ul.moba').nextUntil('single').css('border', '5px solid #f00'); // 后面的所有的同辈元素 到指定的那个为止
         // $('#ul.moba').prev().css('border', '5px solid #f00'); // 前面的一个同辈元素
         // $('#ul.moba').prevAll().css('border', '5px solid #f00'); // 前面所有的同辈元素
         // $('#ul.2D').prevUntil('mmorpg').css('border', '5px solid #f00'); // 前面的所有同辈元素 到某个为止
         $('#ul.moba').siblings().css('border', '5px solid #f00'); // 查找除了自己所有的同辈


    </script>
</head>
<body>
    <h1>JQ</h1>

    <form>
    <input type="button" value="Input Button"/>,
    <input type="checkbox">,
 
    <input type="file">,
    <input type="hidden">,
    <input type="image">,.
    <input type="password">,
    <input type="radio">,
    <input type="reset">,

    <input type="submit">,
    <input type="text">,
    </form>


    <div id="imglist">
        <img src="../../../img/1.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/2.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/3.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/4.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/5.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/6.jpg" alt="m1" width="200" title="i1">
        <img src="../../../img/7.jpg" alt="m1" width="200" title="i1">
    </div>

    <span>选择器</span>
    <input type="text" class="text" name="select">
    <ul id="list">
        <li>
            游戏
            <ul class="moba">
                <li>英雄联盟</li>
                <li class="dota">DOTA</li>
                <li>梦三国</li>
                <li>风暴英雄</li>
                <li>
                    魔兽争霸
                    <ul id="mmorpg">
                        <li>命运2</li>
                        <li>天涯明月刀</li>
                        <li>剑灵</li>
                        <li>
                            古剑奇谭ol
                            <ul id="single">
                                <li>只狼</li>
                                <li>黑暗之魂</li>
                                <li>仁王</li>
                                <li>gta5</li>
                                <li>古墓丽影</li>
                                <li>
                                    刺客信条
                                    <ul id="2D">
                                        <li>地下城与勇士</li>
                                        <li>死亡细胞</li>
                                        <li>空洞骑士</li>
                                    </ul>
                                </li>
                                <li>far cry</li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <ul id="x1">选择器</ul>
</body>
</html>